<template>
  <div class="searchview">
    <div class="massage">你正在预览{{ selectCity }}的天气信息</div>
    <p>当日气温是：{{ cityWeather[0].daytemp }}摄氏度</p>
    <p>当日天气是：{{ cityWeather[0].dayweather }}</p>
    <p>当日风向是：{{ cityWeather[0].daywind }}风</p>
    <p>当日风力是：≤{{ windPower }}级</p>
    <div class="border-line"></div>
    <div class="charts">
      <table>
        <tr>
          <td>今天</td>
          <td>明天</td>
          <td>{{ afterDay }}</td>
          <td>{{ afterDayday }}</td>
        </tr>
        <tr>
          <td v-for="(item,index) in cityWeather" :key="index">{{ item.date }}</td>
        </tr>
        <tr>
         <td v-for="(item,index) in cityWeather" :key="index">{{ item.nightweather }}</td>
        </tr>
        <tr>
         <td v-for="(item,index) in cityWeather" :key="index">风力{{ item.daypower }}级</td>
        </tr>
      </table>
      <v-chart :option="option"></v-chart>
    </div>
  </div>
</template>

<script setup>
import { ref,computed,onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter.js';
const { selectCity, cityWeather,isShowjia } = storeToRefs(useCounterStore())

const option = ref({})//chart数据

// 风力
const windPower = computed(()=>{
    const Power = cityWeather.value[0].daypower
    const dashIndex = Power.indexOf('-'); // 获取 '-' 的索引位置（值为1）
    const max = Power.substring(dashIndex + 1); // 从 '-' 后面的位置开始截取到末尾
    return max
})
// 后天
const afterDay = computed(()=>{
    const arr = ['周二','周三','周四','周五','周六','周日','周一','周二']
    const index = cityWeather.value[0].week
    if(index<'7'){
        return arr[index]
    }else{
        return arr[0]
    }
})
// 大后天
const afterDayday = computed(()=>{
    const arr = ['周三','周四','周五','周六','周日','周一','周二','周三']
    const index = cityWeather.value[0].week
    if(index<'7'){
        return arr[index]
    }else{
        return arr[0]
    }
})

// 白天气温
const optionDataDay = computed(()=>{
    const dayTemp = cityWeather.value.map((item)=> item.daytemp)
    return dayTemp
})
// 晚上气温
const optionDataNight = computed(()=>{
    const nightTemp = cityWeather.value.map((item)=> item.nighttemp)
    return nightTemp
})

// 判断查询的城市天气是否在本地保存中,来控制+是否显示
const showjia = ()=>{
    const arr = JSON.parse(localStorage.getItem('showCitys') || '[]' )
    arr.forEach((item)=>{
       const mes = item.includes(selectCity.value)
       if(mes){
        isShowjia.value = false
        console.log('在')
       }else{
        isShowjia.value = true
        console.log('不在')
       }
    })
}

// 给optionData赋值
const getOptionData = (data1,data2)=>{
    option.value = {
        xAxis: {
    type: 'category',
    show: false,
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    top: 20,
    left: 100,
    right: 100,
    bottom: 0,
  },
  series: [
    {
      type: 'line',
      data: data1,
      label: {
        show: true,
        formatter: function (params) {
          return ' 白 ' + params.value + '℃';
        },
        color:'#fff',
        textBorderColor: 'transparent',  // 文字描边颜色设为透明
      },
    },
    {
      type: 'line',
      data: data2,
      label: {
        show: true,
        formatter: function (params) {
          return ' 晚 ' + params.value + '℃';
        },
        color:'#fff',
        position:'bottom',//设置文字布局向下
        textBorderColor: 'transparent',  // 文字描边颜色设为透明
      },
      itemStyle: {
        color: 'green',
      },
    },
  ],
    }
}

// 挂载时赋值
onMounted(()=>{
    // 挂载时赋值option
    getOptionData(optionDataDay.value,optionDataNight.value)
    // 挂载时判断城市天气是否在本地保存中
    showjia()
})


// const option = ref({
//   xAxis: {
//     type: 'category',
//     show: false,
//     boundaryGap: false,
//   },
//   yAxis: {
//     type: 'value',
//     show: false,
//   },
//   grid: {
//     top: 20,
//     left: 100,
//     right: 100,
//     bottom: 0,
//   },
//   series: [
//     {
//       type: 'line',
//       data: [21, 23, 26, 23],
//       label: {
//         show: true,
//         formatter: function (params) {
//           return ' 白 ' + params.value + '℃';
//         },
//         color:'#fff',
//         textBorderColor: 'transparent',  // 文字描边颜色设为透明
//       },
//     },
//     {
//       type: 'line',
//       data: [15, 17, 16, 17],
//       label: {
//         show: true,
//         formatter: function (params) {
//           return ' 晚 ' + params.value + '℃';
//         },
//         color:'#fff',
//         position:'bottom',//设置文字布局向下
//         textBorderColor: 'transparent',  // 文字描边颜色设为透明
//       },
//       itemStyle: {
//         color: 'green',
//       },
//     },
//   ],
// });
</script>

<style lang="scss" scoped>
.searchview {
  text-align: center;
  color: #fff;
  .massage {
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    background: rgb(0, 78, 113);
  }
  p {
    font-size: 18px;
    margin: 20px 0;
  }
  .border-line {
    height: 40px;
    margin-bottom: 10px;
    border-bottom: 1px solid #999;
    opacity: 0.5;
  }
  .charts {
    max-width: 1200px;
    margin: 0 auto;
    background: rgb(0, 78, 113);
    padding: 40px 80px;
    table {
      width: 100%;
      tr {
        height: 40px;
      }
    }
    .echarts {
      height: 100px;
    }
  }
}
</style>
